
<template>
  <!-- 懒加载tree-select----- 未完成 -->
  <div>
    <el-tree-select
      :node-key="nodeKey"
      :model-value="modelValue"
      :data="treeSelectData"
      :expand-on-click-node="expandOnClickNode"
      :check-strictly="checkStrictly"
      :props="treeProps"
      :filterable="filterable"
      :clearable="clearable"
      :placeholder="placeholder"
      :remote="true"
      :remote-method="remoteMethod"
      @change="confirm"
      @clear="confirm"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    nodeKey: string;
    treeSelectData: String[];
    treeProps?: object;
    showCheckbox?: boolean;
    expandOnClickNode?: boolean;
    checkStrictly?: boolean;
    filterable?: boolean;
    clearable?: boolean;
    placeholder?: string;
  }>(),
  {
    nodeKey: "id",
    showCheckbox: false,
    currentNodeKey: "",
    expandOnClickNode: true, // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
    checkStrictly: false, // 父子组件不关联  // 同时设置expandOnClickNode checkStrictly 可以任选每一个等级
    filterable: true,
    clearable: true,
    placeholder: "",
    treeProps: () => {
      return {
        label: "name",
      };
    },
  }
);
const loadNode = () => {};
const ids = ref([] as any);
// const nodeClick = (node: any, data: any) =>{
//   console.log('[ data ]', data)
//   console.log('[ node.parent ]', node.parent)
//   getTreeNode(data)
// }
// const getTreeNode = (node:any)=>{
//   if (node) {
//       if (node.label  !== undefined) {
//           ids.value.push(node.data.id)
//           getTreeNode(node.parent);
//        }
//    }
// }
const tree = ref([
  {
    id: 1,
    label: "分组1",
    children: [
      {
        id: 4,
        label: "分组1-1",
        children: [
          {
            id: 9,
            label: "客群1-1-1",
          },
          {
            id: 10,
            label: "客群1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "分组2",
    children: [
      {
        id: 5,
        label: "客群2-1",
      },
      {
        id: 6,
        label: "客群2-2",
      },
    ],
  },
  {
    id: 3,
    label: "分组3",
    children: [
      {
        id: 7,
        label: "客群3-1",
      },
      {
        id: 8,
        label: "客群 3-2",
      },
    ],
  },
]);
const remoteMethod = (query: any) => {
  console.log("[ query ]", query);

  // if (query) {
  //   treeDatas.value = datas.value;
  // } else {
  //   treeDatas.value = data.value;
  // }
};
// const nodeChange = (val: any) => {
//   console.log("[ val ]", val);
//   // treeDatas.value = data.value;
// };
const confirm = (id: any) => {
  emits("confirm", id);
  setTimeout(() => {
    emits("update:modelValue", id);
  }, 0);
};
const emits = defineEmits(["confirm", "update:modelValue"]);
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
